<template>
<div class="layout-ceiling">
  <vui-row type="flex" justify="center">
    <vui-col style="width: 1000px;">
      <div class="layout-ceiling-main">

        <template v-if="session.member">
          <div style="float:left;padding-right:15px" v-if="!session.haveUnread">
            <router-link to="/person/msgDetails">
            <vui-icon type="email" size=20></vui-icon>
            </router-link>
          </div>
          <div style="float:left;padding-right:15px;" v-else>
            <vui-badge dot style="display:block">
            <router-link to="/person/msgDetails">
            <vui-icon type="email" size=20></vui-icon>
            </router-link>
          </vui-badge>
          </div>
          <router-link to="/person">{{session.member.name}}</router-link> |
          <router-link to="/logout">退出</router-link>
        </template>
        <template v-else>
          <router-link to="/login">登录</router-link> |
          <router-link to="/register">注册</router-link>
        </template>
      </div>
    </vui-col>
  </vui-row>
</div>
</template>

<script>
import session from '@biz/vtoone.session'

export default {
   computed :{
     session(){
       return  session.store
     }
   }
}
</script>

<style scoped>
.layout-ceiling {
  background: #464c5b;
  overflow: hidden;
  padding: 11px 0;
}

.layout-ceiling-main {
  color: #9ba7b5;
  float: right;
  margin-right: 8px;
}

.layout-ceiling-main a {
  color: #9ba7b5;
}
</style>
